<template>
    <div>
        <!-- 票据库 -->
        <div class="container">
            <!-- 表单栏 -->
            <el-row>
                <el-col :span="24">
                    <avue-form v-model="ticketKuFrom" :option="ticketKuOption" class="yz-form ticket-form"></avue-form>
                    <button class="check-btn rf" @click="getTicketList"><img src="../../assets/imgs/operation_btn_icon_chongzhi_default.png" alt="" class="btn-img">查询</button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                    <el-row>
                        <el-col :span="24" class="ticket-title">票据库</el-col>
                    </el-row>
                    <!-- 表格工具栏 -->
                    <el-row>
                        <el-col :span="24" class="table-fun">
                            <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="refresh">刷新</div>
                            <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="addShow">票据入库</div>
                            <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="outKu">票据退库</div>
                        </el-col>
                    </el-row>
                    <!-- 表格栏 -->
                    <avue-crud :data="ticketTable.data" :option="ticketTable.option" @current-row-change="rowchange" :page="ticketTable.page"  @current-change="ticketPage"></avue-crud>
                </el-col>
                <el-col :span="8">
                    <el-col :span="24" class="ticket-title">明细</el-col>
                    <avue-crud :data="detailList.data" :option="detailList.option" @current-row-change="rowchange"></avue-crud>
                </el-col>
            </el-row>
            
            <!-- 标题栏 -->
            
            <!-- 弹窗栏 -->
            <div class="modal-win" v-show="addWin">
                <el-row>
                    <el-col :span="24">
                    <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf modal-img">
                    <div class="lf modal-title">添加</div>
                    <div class="rf close" @click="closeModual">X</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <avue-form v-model="addForm" :option="addOption" class="yz-form"></avue-form>
                        <button class="check-btn rf" @click="closeModual"><img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
                        <button class="check-btn rf" @click="inKu(addForm)"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确定</button>
                    </el-col>
                </el-row>
                
            </div>
        </div>
    </div>
</template>

<script>
import qs from "qs";
import FormData from "../../components/common/form"
import TableData from "../../components/common/tableData"
const DIC={
    ticketType:[]
}
export default {
  data: function() {
    return {
        ticketKuFrom:{},
        ticketKuOption:{
            dicData:DIC,
            column:[
                {
                    label:"车票类型",
                    type:"select",
                    dicData: 'ticketType',
                    prop:"tickType",
                    span:5
                },
                {
                    label:"批次号",
                    prop:"ID",
                    span:5
                },
                {
                    label:"入库时间",
                    prop:"inTime",
                    type:"datetimerange",
                    span:9
                },
            ]
        },
        ticketTable:{
            page: {
                pageSizes: [10],
                total: 20,
                currentPage: 1,
                pageSize: 10,
            },
            data:[],
            option:{
                page:true,
                align:'center',
                menu:false,
                menuAlign:'center',
                highlightCurrentRow:true,
                column:[
                    {
                        label:"批次号",
                        prop:"batch_no"
                    },
                    {
                        label:"票段起始号",
                        prop:"begin_no"
                    },
                    {
                        label:"票段结束号",
                        prop:"end_no"
                    },
                    {
                        label:"票数合计",
                        prop:"counts"
                    },
                    {
                        label:"票据剩余",
                        prop:"last"
                    },
                    {
                        label:"票据类型",
                        prop:"type"
                    },
                    {
                        label:"入库操作用户",
                        prop:"update_user"
                    },
                    {
                        label:"入库操作时间",
                        prop:"update_time"
                    },
                ]
            }
        },
        addWin:false,
        addForm:{},
        addOption:{
            dicData:DIC,
            column:[
                {
                    label:"批次号",
                    prop:"id",
                    span:12
                },
                {
                    label:"票数合计",
                    prop:"count",
                    disabled:true,
                    span:12
                },
                {
                    label:"起始号",
                    prop:"begin",
                    span:12
                },
                {
                    label:"结束号",
                    prop:"end",
                    span:12
                },
                {
                    label:"票据类型",
                    prop:"type",
                    type:"select",
                    dicData: 'ticketType',
                    span:12
                },
            ]
        },
        detailList:{
            data:[],
            option:{
                menu:false,
                page:false,
                column:[
                    {
                        label:"领用人",
                        prop:"owner_user_name"
                    },
                    {
                        label:"起始号",
                        prop:"begin_no"
                    },
                    {
                        label:"结束号",
                        prop:"end_no"
                    },
                    {
                        label:"剩余",
                        prop:"last",
                        formatter:function(row, value , label, column){
                            return row.counts-row.used
                        }
                    },
                    
                ]
            }
        },
        currentRow:""
    };
  },
  methods: {
      getTickerType(){
          DIC.ticketType=[];
          this.postRequest("/fin/bill/billtype").then(data=>{
              console.log(data);
              for(var item of data.data){
                  DIC.ticketType.push({
                      label:item.value,
                      value:item.key
                  });
              }
          })
      },
      ticketPage(val){
          this.ticketTable.page.currentPage=val;
          this.getTicketList();
      },
      getTicketList(){
        //   console.log(this.ticketKuFrom.inTime[1]);
          this.postRequest("/fin/bill/store/list",{
              filterRules:JSON.stringify([
                   {"field":"type","op":"eq","value":this.ticketKuFrom.tickType},{"field":"batch_no","op":"bw","value":this.ticketKuFrom.ID},{"field":"create_time","op":"dge","value":this.dateToString(this.ticketKuFrom.inTime[0])+" "+this.ticketKuFrom.inTime[0].toString().slice(17,24)},{"field":"create_time","op":"dle","value":this.dateToString(this.ticketKuFrom.inTime[1])+" "+this.ticketKuFrom.inTime[1].toString().slice(17,24)}
              ]),
              rows:10,
              page:this.ticketTable.page.currentPage
          }).then(data=>{
              this.ticketTable.page.total=data.data.totalRow
              this.ticketTable.data=data.data.list;
          });
      },
      refresh(){
          this.getTicketList();
      },
      addShow(){
          this.addWin=true;
      },
      inKu(item){
          this.getRequest("/fin/bill/store/add?billScope.id=&billScope.batch_no="+item.id+"&billScope.begin_no="+item.begin+"&billScope.end_no="+item.end+"&billScope.counts="+item.count+"&billScope.type="+item.type).then(data=>{
              if(data.data[0]==0){
                  this.$message({
                    message: data.data[1],
                    type: 'success'
                    });
                    this.addWin=false;
              }else{
                  this.$message.error(data.data[1]);
              }
          });
      },
      outKu(){
          this.postRequest("/fin/bill/store/del",{
              id:this.currentRow.id
          }).then(data=>{
              if(data.data[0]==0){
                  this.$message({
                    message: data.data[1],
                    type: 'success'
                    });
                this.getTicketList();
              }else{
                  this.$message.error(data.data[1]);
              }
          });
      },
      closeModual(){
          this.addWin=false;
      },
      rowchange(val){
          this.currentRow=val;
          this.postRequest("/fin/bill/store/getStoreDetial?bill_scope_id="+this.currentRow.id).then(data=>{
                this.detailList.data=data.data.list
          })
      }
  },
  computed: {},
  components:{FormData,TableData},
  watch: {
      addForm(){
        this.addForm.count=this.addForm.begin-this.addForm.end;
      }
  },
  mounted() {
      console.log("票据库");
      this.$emit("sendActive","1-1");
      this.getTickerType();
      this.getTicketList();
  }
};
</script>
<style scoped src="../../assets/css/financeManage/tickerKu.css">
</style>